<template>
  <!-- 访客记录-详情 -->
  <div>
    <public-modal
      width="1000px"
      :footer="false"
      :title="title"
      modalStyle="detailModal"
      :publicVisible="publicVisible"
      cancelContext="拒绝"
      confirmContext="通过"
      @handleOk="handleOk"
      @cancel="cancel"
    >
      <div slot="content">
        <div class="common-title">
          <div class="icon"></div>
          <div class="content">单位信息</div>
        </div>
        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">单位名称</div>
              <div class="value common-value">{{ companyMessage.companyMessage || '暂无' }}</div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">标准地址</div>
              <div class="value common-value">{{ companyMessage.communityName || '暂无' }}</div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">单位负责人</div>
              <div class="value common-value">{{ companyMessage.dutyPersonName || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">联系电话</div>
              <div class="value common-value">
                {{ companyMessage.mobile || '暂无' }}
              </div>
            </div>
          </div>
        </div>

        <div class="common-title">
          <div class="icon"></div>
          <div class="content">送修车辆信息</div>
        </div>

        <template v-if="machineRepairRecord.carType == '1'">
          <div class="content-wrapper">
            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">车辆类型</div>
                <div class="value common-value">
                  {{ machineRepairRecord.carType == '1' ? '汽车' : '电动车/摩托车' }}
                </div>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">送修原因</div>
                <div class="value common-value">
                  {{ machineRepairRecord.faultDescribe || '暂无' }}
                </div>
              </div>
            </div>

            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">车牌号</div>
                <div class="value common-value">{{ machineRepairRecord.carNumber || '暂无' }}</div>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">车架号</div>
                <div class="value common-value">
                  {{ machineRepairRecord.frameNumber || '暂无' }}
                </div>
              </div>
            </div>

            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">车辆颜色</div>
                <div class="value common-value">{{ machineRepairRecord.carColorName || '暂无' }}</div>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">车辆照片</div>
                <div
                  class="value common-value deatil-color"
                  v-if="machineRepairRecord.imageListUrl && machineRepairRecord.imageListUrl.length > 0"
                  @click="handlePreview(machineRepairRecord.imageListUrl)"
                >
                  查看
                </div>
                <div class="value common-value" v-else>暂无</div>
              </div>
            </div>

            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">发动机编号</div>
                <div class="value common-value">{{ machineRepairRecord.engineNumber || '暂无' }}</div>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">可疑车辆</div>
                <div class="value common-value">
                  {{ machineRepairRecord.isSuspectedVehicle == 1 ? '是' : '否' }}
                </div>
              </div>
            </div>

            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">送修时间</div>
                <div class="value common-value">
                  {{ moment(machineRepairRecord.sendRepairTime).format('YYYY/MM/DD HH:mm') || '暂无' }}
                </div>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">送修上报时间</div>
                <div class="value common-value">
                  {{ machineRepairRecord.sendRepairEscalationTime || '暂无' }}
                </div>
              </div>
            </div>

            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">取车时间</div>
                <div class="value common-value">
                  {{ moment(machineRepairRecord.takeTime).format('YYYY/MM/DD HH:mm') || '暂无' }}
                </div>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">取车上报时间</div>
                <div class="value common-value">
                  {{ machineRepairRecord.takeEscalationTime || '暂无' }}
                </div>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="content-wrapper">
            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">车辆类型</div>
                <div class="value common-value">
                  {{ machineRepairRecord.carType == '1' ? '汽车' : '电动车/摩托车' }}
                </div>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">品牌型号</div>
                <div class="value common-value">
                  {{ machineRepairRecord.carModule || '暂无' }}
                </div>
              </div>
            </div>

            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">车牌号</div>
                <div class="value common-value">{{ machineRepairRecord.carNumber || '暂无' }}</div>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">车架号</div>
                <div class="value common-value">
                  {{ machineRepairRecord.frameNumber || '暂无' }}
                </div>
              </div>
            </div>

            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">车辆照片</div>
                <div
                  class="value common-value deatil-color"
                  v-if="machineRepairRecord.imageListUrl"
                  @click="handlePreview(machineRepairRecord.imageListUrl)"
                >
                  查看
                </div>
                <div class="value common-value" v-else>暂无</div>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">送修时间</div>
                <div class="value common-value">
                  {{ moment(machineRepairRecord.sendRepairTime).format('YYYY/MM/DD HH:mm') || '暂无' }}
                </div>
              </div>
            </div>

            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">上报时间</div>
                <div class="value common-value">
                  {{ machineRepairRecord.sendRepairEscalationTime || '暂无' }}
                </div>
              </div>
            </div>
          </div>
        </template>

        <div class="common-title">
          <div class="icon"></div>
          <div class="content">送修人员</div>
        </div>

        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">送修人</div>
              <div class="value common-value">{{ machineRepairRecord.sendRepairName || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">手机号码</div>
              <div class="value common-value">
                {{ machineRepairRecord.sendRepairPhone || '暂无' }}
              </div>
            </div>
          </div>

          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">身份证号</div>
              <div class="value common-value">{{ machineRepairRecord.sendRepairIdcard || '暂无' }}</div>
            </div>
          </div>
        </div>

        <template v-if="type == 'take'">
          <div class="common-title">
            <div class="icon"></div>
            <div class="content">取车人员</div>
          </div>

          <div class="content-wrapper">
            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">取车人</div>
                <div class="value common-value">{{ machineRepairRecord.takeName || '暂无' }}</div>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">手机号码</div>
                <div class="value common-value">
                  {{ machineRepairRecord.takePhone || '暂无' }}
                </div>
              </div>
            </div>

            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">身份证号</div>
                <div class="value common-value">{{ machineRepairRecord.takeIdcard || '暂无' }}</div>
              </div>
            </div>

            <!-- <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">取车时间</div>
                <div class="value common-value">
                  {{ moment(machineRepairRecord.takeTime).format('YYYY/MM/DD HH:mm') || '暂无' }}
                </div>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">上报时间</div>
                <div class="value common-value">
                  {{ machineRepairRecord.takeEscalationTime || '暂无' }}
                </div>
              </div>
            </div> -->
          </div>
        </template>
      </div>
      <div slot="footer"></div>
    </public-modal>
  </div>
</template>
<script>
import startEndTime from '@/components/startEndTime'
import publicModal from '@/components/publicModal'
import { JeecgListMixinNew } from '@/mixins/JeecgListMixinNew'
import { houseDetails } from '@/api/api'
import { rentingHouseDetails, webMachineRepairRecordDetails, webpopulationDetails } from '../../../../api/api'
import moment from 'moment'
import { getPrefixImg, previewImage } from '../../../../utils/util'

export default {
  name: 'actuallyDetail',
  components: { publicModal, startEndTime },
  mixins: [JeecgListMixinNew],
  props: {
    type: String,
    default: '', // 取车还是修车
  },
  data() {
    return {
      prefixImg: getPrefixImg(),
      url: {
        list: '/common/project_company_serve_record/page',
      },
      publicVisible: false,
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '人员姓名',
          align: 'center',
          dataIndex: 'fXm',
          ellipsis: true,
        },
        {
          title: '与房主关系',
          align: 'center',
          dataIndex: 'fTgryfzgx',
          ellipsis: true,
        },
        {
          title: '联系方式',
          align: 'center',
          dataIndex: 'fLxdh',
          ellipsis: true,
        },
        {
          title: '身份证号',
          align: 'center',
          dataIndex: 'fGmsfhm',
          width: 200,
          ellipsis: true,
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          ellipsis: true,
          align: 'center',
          width: 100,
        },
      ],
      project_company_type: [],
      queryParams: { pageSize: 5 },
      ipagination: { pageSize: 5 },
      disableMixinCreated: true,
      housePopulationlist: [],
      listRecontract: [],
      listHistoricalContract: [],
      historyDetailRef: null,

      companyMessage: {},
      machineRepairRecord: {},
    }
  },
  computed: {
    title() {
      return this.type === 'take' ? '取车记录详情页' : '送修记录详情页'
    },
  },
  methods: {
    handlePreview(urls = []) {
      previewImage.call(this, urls)
    },
    moment,
    handlePopulationDetail(records) {
      this.$refs.populationDetailRef.show({
        ...records,
        id: records.fId,
      })
    },
    async show(records) {
      this.publicVisible = true
      this.getDetail(records)
    },
    getDetail(records) {
      const params = {
        id: records.id,
      }
      webMachineRepairRecordDetails(params).then((res) => {
        if (res.code == 200) {
          const { companyMessage, machineRepairRecord } = res.result
          this.companyMessage = companyMessage
          this.machineRepairRecord = machineRepairRecord
        } else {
        }
      })
    },
    handleOk() {
      this.publicVisible = false
    },
    cancel(target) {
      this.publicVisible = false
    },
    handleHistoryDetail(records) {
      this.$refs.historyDetailRef.show(records)
    },
  },
}
</script>
<style scoped lang="less">
/deep/ .modalCotent {
  padding: 20px 40px;
  border-radius: 0 0 4px 4px;

  .img-style-wrapper {
    width: 140px;
    height: 124px;
    border-radius: 8px 8px 8px 8px;
    object-fit: cover;
    margin-right: 10px;
  }
}
</style>
